<template>
  <div id="contianer">
    <div class="screen_model">
      <el-row :gutter="20">
        <el-col prop="msgTitle" :span="5">
          <el-input
            size="small"
            v-model="searchForm.name"
            placeholder="文件名称"
            clearable
          ></el-input>
        </el-col>
        <el-col prop="appType" :span="5">
          <el-select
            v-model="searchForm.profession"
            placeholder="专业类型"
            clearable
          >
            <el-option
              v-for="item in majorTypeList"
              :key="item.id"
              clearable
              :label="item.name"
              :value="item.id"
            >
            </el-option
          ></el-select>
        </el-col>
        <el-col
          :span="4"
          style="display: flex; justify-content: end; float: right"
        >
          <el-button type="primary" @click="searchFn" size="small"
            >查询</el-button
          >
          <el-button @click="resetSearch()" size="small">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="video_list" :style="boxClientHeight">
      <div
        class="video_model"
        v-for="(item, index) in videoList"
        :key="index"
        @click="view(item.id)"
      >

        <img v-if="!item.fileVo" style="width: 100%;height: 140px;" src="../../../../assets/images/video_default.png"></img>
        <video style="width: 100%;height: 140px;" v-else :src="$config.VUE_APP_BASE_API_QA + item.fileVo.downloadUrl"></video>
        <!-- <div v-else class="video_cont" :id="'video' + index"></div> -->
        <div class="video_info">
          <span class="title">
            <h3>{{ item.fileName }}</h3>
            <img
                class="nomore"
                :src="
                  item.collect == 1
                    ? require('@/assets/images/collect_yes.png')
                    : require('@/assets/images/collect_no.png')
                "
                style="width: 21px; max-height: 21px"
                @click.stop="collectionFn(item)"
              />
          </span>
          <span class="author"><span class="span">作者名称：</span>{{ item.author }}</span>
          <span class="blurb"><span class="span">课程简介：</span>{{ item.introduction }}</span>
        </div>
      </div>
    </div>

    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageNo"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="total"
      background
      layout="total, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    };
    return {
      batchImportVisible: false,
      majorTypeList: [],
      videoList: [],
      searchForm: {
        name: "",
        profession: "",
      },
      appList: [],
      dataList: Array(10).fill(item),
      pageNo: 1,
      pageSize: 12,
      total: 0,
      ruleForm: {},
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        userType: [
          { required: true, message: "请选择用户类型", trigger: "change" },
        ],
        userName: [
          { required: true, message: "请输入用户名", trigger: "change" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },

  computed: {
    boxClientHeight() {
      let boxClientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      boxClientHeight = boxClientHeight - 289;
      return { height: boxClientHeight + "px" };
    },
  },
  mounted() {
    this.majorTypeListFn();
    this.getVideoList();
  },
  methods: {
    searchFn() {
      this.pageNo = 1;
      this.getVideoList();
    },
    majorTypeListFn() {
      this.$http({
        url: "/dict/major/list",
        method: "GET",
        params: {},
      }).then(({ data }) => {
        console.log(data.data.data);
        this.majorTypeList = data.data.data;
      });
    },
    getVideoList() {
      this.$http({
        url: "/knowledgeTrain/list",
        method: "get",
        params: {
          pageNumber: this.pageNo,
          pageSize: this.pageSize,
          ...this.searchForm,
        },
      }).then(({ data }) => {
        this.videoList = data.data.data;
        this.total = data.data.totalSize;
        this.pageNo = data.data.pageNumber;
        // this.videoList.map((item, index) => {
        //   if (item.fileVo) {
        //     new this.$Player({
        //       id: `video${index}`, // 元素id
        //       lang: "zh", // 设置中文
        //       volume: 0, // 默认静音
        //       autoplay: false, // 自动播放
        //       screenShot: false, // 开启截图功能
        //       height: 200,
        //       // 视频地址
        //       url: item.fileVo.downloadUrl,

        //       // //封面图
        //       // poster:
        //       //   "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
        //       fluid: true, // 填满屏幕 （流式布局）
        //       playbackRate: [0.5, 0.75, 1, 1.5, 2], // 传入倍速可选数组
        //     });
        //   }
        // });
      });
    },
    // 重置
    resetSearch() {
      this.searchForm = {
        name: "",
        profession: "",
      };
      this.getVideoList();
    },
    view(id) {
      this.$router.push({
        path: "/onlineTraining/details",
        query: {
          id,
        },
      });
    },
    edit() {},
    quitCollection() {},
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.getVideoList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.getVideoList();
    },
    collectionFn(item) {
      let url =
        item.collect === 1
          ? "/knowledgeCollect/delete"
          : "/knowledgeCollect/add";
      this.$http({
        url: url,
        method: "post",
        data: {
          collectType: "2",
          knowledgeFileId: item.id,
        },
      }).then(({ data }) => {
        if (item.collect === 1) {
          this.$message.success("取消收藏");
          item.collect = 0;
          item.collectNumber--
        } else {
          this.$message.success("已收藏");
          item.collect = 1;
          item.collectNumber++
        }
        this.$forceUpdate();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#contianer {
  width: 98%;
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin: 1%;
  float: left;
  // height: calc(100vh - 112px);

  .screen_model {
    margin-bottom: 20px;
  }

  .el-select {
    width: 100%;
  }

  .video_list {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    grid-gap: 1%;
    overflow-y: auto;
    .video_model {
      width: 24%;
      height: 260px;
      // height: 190px;
      // background: red;
      border: 1px solid #e6e6e6;
      border-radius: 5px;
      margin-bottom: 20px;
      cursor: pointer;

      .video_info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px;
        line-height: 22px;

        .title {
          display: flex;
          align-items: center;
          margin-bottom: 5px;

          h3 {
            flex: 1;
            padding: 0;
            margin: 0;
            font-family: 思源黑体;
            font-size: 18px;
            font-weight: normal;
            line-height: 22px;
            color: #4C5A67;
          }

          .collection {
            color: #1890ff;
            cursor: pointer;
            font-size: 13px;
          }
        }

        .author, .blurb {
          font-family: 思源黑体;
          font-weight: normal;
          line-height: 22px;
          color: #4C5A67;
          font-size: 14px;
          margin-top: 3px;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          .span{
            color: #828D99;
          }
        }
      }
    }
  }
}

// .el-pagination {
//     position: absolute;
//     bottom: 20px;
//     right: 20px;
// }
.video_cont {
  // background-image: url('../../../../assets/images/empty_video.png');
  // background-size: 100% 100%;
  // background-repeat: no-repeat;
  height: 140px;
}
::v-deep .xgplayer {
  height: 140px !important;
}
</style>
